d26 待辦事項清單

16th鐵人賽

max1112

2024-10-10 16:18:40

106 瀏覽

分享至

撰寫JavaScript邏輯

// 取得輸入框和清單的 DOM 元素
const inputField = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');

// 新增待辦事項
function addTask() {
    const taskText = inputField.value; // 取得輸入框的內容

    if (taskText.trim() !== "") {      // 確保輸入框不為空
        const listItem = document.createElement('li');  // 創建一個新清單項目
        listItem.textContent = taskText;                // 將輸入的文字作為項目內容

        // 創建一個刪除按鈕
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        deleteButton.onclick = function () {
            listItem.remove();  // 點擊刪除按鈕後，移除該清單項目
        };

        // 將刪除按鈕添加到清單項目，並將清單項目添加到清單中
        listItem.appendChild(deleteButton);
        todoList.appendChild(listItem);

        // 清空輸入框，準備輸入新的待辦事項
        inputField.value = '';
    }
}

建立基本的HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>

    <!-- 引用外部的 CSS 文件來設計頁面的外觀 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="todo-container">
        <h1>To-Do List</h1>

        <!-- 輸入框讓使用者新增新的待辦事項 -->
        <input type="text" id="todo-input" placeholder="Add a new task...">

        <!-- 新增按鈕，點擊後會將輸入框的內容加入待辦清單 -->
        <button onclick="addTask()">Add</button>

        <!-- 未完成的待辦事項清單 -->
        <ul id="todo-list"></ul>
    </div>

    <!-- 引用外部的 JavaScript 文件來處理邏輯 -->
    <script src="script.js"></script>
</body>
</html>

設計基本的CSS風格

/* 頁面基本樣式，讓清單居中並且更易於閱讀 */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* 待辦事項應用的主要容器樣式 */
.todo-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
}

/* 標題樣式 */
h1 {
    text-align: center;
    margin-bottom: 20px;
}

/* 輸入框樣式 */
#todo-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* 新增按鈕樣式 */
button {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #218838;
}

/* 待辦事項清單項目樣式 */
ul {
    list-style-type: none;  /* 移除預設的項目符號 */
    padding: 0;
}

/* 每個待辦事項項目的樣式 */
li {
    display: flex;
    justify-content: space-between; /* 讓項目和按鈕分開顯示 */
    align-items: center;
    background-color: #f8f9fa;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* 刪除按鈕樣式 */
li button {
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

li button:hover {
    background-color: #c82333;
}